<template>
  <div class="app homeCarousel">
    <!-- 旋转木马 -->
    <carousel :imgdata="imgdata" :height="443"></carousel>
    <div class="cont1200">
      <!-- 活动区域 -->
      <div class="salesPromotion cont1200">
        <picturesShow :proList="proList" width="220" height="145"></picturesShow>
      </div>
      <br />
      <!-- 商家展示广告位 -->
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark">
            <img
              style="width:100%;"
              :src="leftAd.src"
              alt
              srcset
            />
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-dark merchants-item flex">
            <div class="merchants-items" v-for="i in merchantsAD" :key="i">
              <imgBox
                :msg="{
                  src:i.src,
                url:i.url,
                w:'100%',
                }"
              ></imgBox>
            </div>
          </div>
        </el-col>
      </el-row>
      <br />
      <br />

      <!-- 楼 -->
      <mytitleBoxClean :msg="{ f: 'l', w:2, t:'标题'}"></mytitleBoxClean>
      <br />
      <div class="imgbu"></div>
      <FirstFloor :data="FirsData"></FirstFloor>
      <br />
      <br />

      <mytitleBoxClean :msg="{ f: 'c',  t:'标题'}"></mytitleBoxClean>
      <br />
      <el-row class="tower1">
        <el-col :span="24" class="to-l flex-c">
          <div class="msg" v-for="i in 15" :key="i">
            <imgBox
              :msg="{
                  src:'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i2/378840143/O1CN010PeclO1CvXBjdUokG_!!0-saturn_solar.jpg_250x250.jpg_.webp',
                url:'',
                h:'100%',
                t1:'电动车',
                t2:'描述',
                t3:'100'
                }"
            ></imgBox>
          </div>
        </el-col>
      </el-row>
      <br />
      <br />

      <!-- 楼 -->
      <mytitleBoxClean :msg="{ f: 'l', w:2, t:'标题'}"></mytitleBoxClean>
      <br />
      <FirstFloor :data="FirsData"></FirstFloor>
      <!-- 楼 -->
      <br />
      <br />
      <!-- 楼 -->
      <mytitleBoxClean :msg="{ f: 'l', w:2, t:'标题'}"></mytitleBoxClean>
      <br />
      <br />
      <FirstFloor :data="FirsData"></FirstFloor>
      <!-- 楼 -->
      <br />
      <br />
      <br />
      <mytitleBoxClean :msg="{ f: 'l', w:2, t:'热门新闻'}"></mytitleBoxClean>
      <br />
      <br />
      <el-ro class="tower2 flex-c">
        <div class="list" v-for="i in PC_HOHE_INFORMATION" :key="i">
          <imgBox
            :msg="{
              src:i.src,
            c:1,
            w:'100%',
            imgw:'100%',
            url:i.url
            }"
          ></imgBox>
        </div>
      </el-ro>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import FirstFloor from "./FirstFloor";
import carousel from "@/components/carousel/carousel";
import picturesShow from "@/components/picturesShow/picturesShow";
import mytitleBoxClean from "@/components/titleBox/titleBoxClean";
import imgBox from "@/components/imgBox/imgBox";

export default {
  data() {
    return {
      imgdata: "",
      proList: [],
      merchantsAD: [],
      leftAd:{},
      PC_HOHE_INFORMATION:[]
    };
  },
  computed: {
    FirsData: function() {
      //轮番图下面的广告
      return this.$api.homeAPI.getFirsData();
    }
  },
  created: function() {
    this.$api.commonAPI.getAD("PC_HOME_LF").then(response => {
      //首页轮番图下面的广告
      this.imgdata = response.data;
      console.log(this.imgdata);
    });
    this.$api.commonAPI.getAD("PC_HOME_MERCHANT").then(response => {
      //首页商家品牌位置
      this.merchantsAD = response.data;
    });
    this.$api.commonAPI.getAD("PC_HOME_LEFTAD").then(response => {
      //首页商家品牌左边广告
      this.leftAd = response.data;
    });
      this.$api.commonAPI.getAD("PC_HOHE_INFORMATION").then(response => {
      //首页底部资讯
      this.PC_HOHE_INFORMATION = response.data;
    });
  },
  components: {
    FirstFloor,
    carousel,
    picturesShow,
    mytitleBoxClean,
    imgBox
  }
};
</script>
<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.block {
  width: 100%;
  height: 442px;
  margin: 0 auto;
  .carImg {
  }
}
.salesPromotion {
  margin-top: 10px;
  margin-bottom: 10px;
}
.imgbu {
  img {
    width: 100%;
    height: 300px;
  }
}
.imgCar {
  width: 100%;
  height: 443px;
  position: relative;
  top: -11px;
  overflow: hidden;
}
.homeCarousel {
  .merchants-item {
  }

  .merchants-items {
    padding-top: 10px;
    width: 130px;
    height: 65px;
    margin-bottom: 3px;
  }
}
.tower1 {
  height: 1012px;
  background-color: rgb(236, 236, 236);
  .msg {
    width: (100% / 5.5);
    margin-top: 10px;
    margin-bottom: 10px;
    height: 317px;
    background-color: rgb(255, 255, 255);
  }
}
.tower2 {
  .list {
    width: 200px;
  }
}
</style>
